<template>
	<view>
		<template v-if="isShow === false">
			<!-- 顶部导航栏 -->
			<view class="horizonal-tab">
				<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'top'+ tabIndex">
					<block v-for="(item,index) in warehouseList" :key="index">
						<view class="scroll-tab-item" :class="{'active': tabIndex==index} " @tap="toggleTab(index)" :id="'top'+ index">
							{{item.warehouse_serial_number}}
							<view class="scroll-tab-line"></view>
						</view>
					</block>
				</scroll-view>
				<!-- <view class="searchModel">
					<input placeholder-style="font-size:30rpx;" placeholder="搜索养殖仓查看" />
					<text class="icon iconfont icon-search "></text>
				</view> -->
			</view>
			
			<!-- 滑块视图 -->
			<view class="content_view">
				<view class="content_view_head">
					<swiper class="swiperitem" :current="tabIndex" :style="{height: swiperHeight + 'px'}" @change="tabChange">
						<swiper-item v-for="(item,index) in warehouseList.length">
							<template v-if="isShow2 === false">
								<feeding-situation-line :dataList="dataList" class="feedingSituation"></feeding-situation-line>
							</template>
							<template v-else>
								<xw-empty :isShow="isShow2" text="该养殖仓暂无相关信息" textColor="#777777"></xw-empty>
							</template>
						</swiper-item>			
					</swiper>
				</view>
			</view>
		</template>
		<template v-else>
			<xw-empty :isShow="isShow" text="暂无饲养情况信息" textColor="#777777"></xw-empty>
		</template>
	</view>
</template>

<script>
	import xwEmpty from '../../../components/xw-empty/xw-empty.vue'
	import noThing from '../../../components/common/no-thing.vue'
	import feedingSituationLine from '../../../components/feeding-situation-line/feeding-situation-line.vue'
	export default{
		data () {
			return{
				tabIndex: 0,
				swiperHeight: 600,
				warehouseList: [],
				dataList: [],
				isShow: false,
				isShow2:false,
				person: '',
				farmId: ''
			}
		},
		components:{
			feedingSituationLine,
			xwEmpty,
			noThing
		},
		
		methods:{
			//自动获取组件内容区域的高度，设置swiper的高度
			getElementHeight(element) {
			    setTimeout(()=>{
			        let query = uni.createSelectorQuery().in(this);
			        query.select(element).boundingClientRect();
			        query.exec((res) => {
			            if (!res) {//如果没获取到，再调一次
			                this.getElementHeight();
							
			            }else {
			                this.swiperHeight = res[0].height + 200;
			            }
						//console.log(res)
			        })
			    },20)
			},
			//获取用户角色
			getRole(){
				this.person = this.User.userRight.name
				console.log(this.person)
			},
			//切换选项卡
			toggleTab(index) {
				this.tabIndex = index;
			},
			
			//滑动切换swiper
			tabChange(e) {
				this.tabIndex = e.detail.current;
				this.dataList = []
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 400
				})
				setTimeout(() => {
					this.getData()
				},200)
			},
			
			//初始化数据
			init () {
				uni.request({
					url:this.confige.webUrl+'/livestock/selWarehouse',
					data:{
						farm_id: this.farmId
					},
					header:{
						"X-Token":this.User.token
					},
					success: (res) => {
						//console.log(res)
						if(res.data.result != null){
							this.isShow = false
							this.warehouseList = res.data.result;
							this.getData();
						}else{
							this.isShow = true
						}
					}
				})
				
				// setTimeout(() => {
				// },600)
				
			},
			
			//获取养殖仓的饲养情况数据
			getData () {
				// console.log(this.warehouseList[this.tabIndex].warehouse_id)
				uni.request({
					url:this.confige.webUrl+'/livestock/listRaiaeByWarehouseId',
					data:{
						warehouse_id: this.warehouseList[this.tabIndex].warehouse_id
					},
					header:{
						"X-Token":this.User.token
					},
					success: (res) => {
						console.log(res)
						if(res.data.result == null) {
							this.isShow2 = true
						}else{
							this.isShow2 = false
							this.dataList = res.data.result[0].list
							setTimeout(() => {
								this.getElementHeight(".feedingSituation")
							},400)
						}
					}
				})
			}
		},
		onLoad(option) {
			this.getRole()
			if(this.person === 'government'){
				this.farmId = option.farmId
			}else{
				this.farmId = this.User.userInfo.farm_id
			}
		},
		onReady() {
			this.init()
		}
	}
</script>

<style lang="less">
	@import "../../../common/animate.css";
	@import "../../../common/iconfont.css";
	@import "../../../common/uni.css";
	@import "../../../common/main.css";
	page { background: #f8f8f8;}
		
	.searchModel{
		width: 80%;
		margin:40rpx auto;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: center;
		padding:5rpx;
		height: 60rpx;
		border: 2rpx solid #4AC997;
		border-radius: 60rpx;
		color: #717171;
		>input{ width: 85%;}
		>text{font-size: 35rpx;}
		
	}
	
	.horizonal-tab {
		position: sticky;
		z-index: 1;
		top: 0;
		background: #FFFFFF;
	}
	
	.horizonal-tab .active {
		color: #000000;
		padding-left: 20rpx;
	}
	
	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		text-align: center;
		font-size: 36rpx;
	}
	
	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
		color: #ccc;
	}
	
	.active .scroll-tab-line {
		border-bottom: 5rpx solid #4AC997;
		border-top: 5rpx solid #4AC997;
		border-radius: 20rpx;
		width: 100%;
	}
	
	
</style>
